let baseCode = `<pre><code class="JavaScript">&lt;template&gt;
&lt;div class="box"&gt;
  &lt;el-button
    type="primary"
    icon="el-icon-view"
    style="cursor: pointer; margin-bottom: 10px"
    @click="see()"
    size="mini"
    &gt;预览&lt;/el-button
  &gt;
  &lt;!-- 编辑器 --&gt;
  &lt;div id="editor"&gt;&lt;/div&gt;
  &lt;!-- 预览弹框 --&gt;
  &lt;div id="editorBox" v-if="lookSEE"&gt;
    &lt;el-dialog :visible.sync="lookSEE"&gt;
      &lt;el-dialog
        width="80%"
        title="正文内容 &gt; 效果预览"
        :visible.sync="lookSEE"
        append-to-body
        @close="concal()"
      &gt;
        &lt;hr /&gt;
        &lt;div class="html" v-html="contentEditor"&gt;&lt;/div&gt;
        &lt;div slot="footer" class="dialog-footer"&gt;
          &lt;el-button @click="concal()"&gt;取消&lt;/el-button&gt;
        &lt;/div&gt;
      &lt;/el-dialog&gt;
    &lt;/el-dialog&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import E from "wangeditor";
// import { getToken } from "@/utils/auth";//请求头
// import { uploadPath } from "@/api/upload";//请求路径
export default {
data() {
  return {
    contentEditor: "",
    lookSEE: false,
    isignore: true,
    editor: undefined,
    show: true,
    ignoreObj: {},
    sensitiveWords: undefined,
    map: undefined,
    queryParams: {},
  };
},
props: {
  contentHtml: {
    type: String,
    default() {
      return "";
    },
  },
},

created() {
  //   来自父组件的传参
   if (this.contentHtml) {
    this.contentEditor = this.contentHtml;
  }
},
mounted() {
  this.editor = new E("#editor");
  // 设置编辑区域高度为 300px
  this.editor.config.height = 500;
  // 编辑器 z-index 默认为 10000，可以自行调整。
  this.editor.config.zIndex = 20;
  // 可以修改 placeholder 的提示文字。
  this.editor.config.placeholder = "请输入正文";
  // 取消自动 focus
  this.editor.config.focus = false;

  // *****************************************************
  this.editor.config.menus = [
    "head",
    "bold",
    "fontSize",
    "fontName",
    "italic",
    "underline",
    "strikeThrough",
    "indent",
    "lineHeight",
    "foreColor",
    "backColor",
    "link",
    "list",
    "todo",
    "justify",
    "quote",
    "emoticon",
    "image",
    "video",
    "table",
    "code", // 插入代码
    "splitLine",
    "undo",
    "redo",
  ];
  // *****************************************************
  // 配置颜色（文字颜色、背景色）
  this.editor.config.colors = [
    // "#000000",
    "#333333",
    // "#222222",
    "#1c487f",
    "#eeece0",
    "#4d80bf",
    "#ffffff",
    "#FF0000",
    "#00FF00",
    " #0000FF",
    "#FF00FF",
    "#FFFF00",
    "#70DB93",
    "#5C3317",
  ];
  // *****************************************************
  // 配置字体
  this.editor.config.fontNames = [
    //   字符串形式
    "仿宋",
    "黑体",
    "楷体",
    "标楷体",
    "华文仿宋",
    "华文楷体",
    "宋体",
    "微软雅黑",
    "Microsoft YaHei",
    "Times New Roman",
    "Arial",
    "Tahoma",
    "Verdana",
    "Courier New",
  ];
  // *****************************************************
  // 设置字号，只能改变  name字段 ,渲染时候需要加上css样式
  // this.editor.config.fontSizes = {
  //   "x-small": { name: "14px", value: "1" },
  //   small: { name: "16px", value: "2" },
  //   normal: { name: "18px", value: "3" },
  //   large: { name: "20px", value: "4" },
  //   "x-large": { name: "22px", value: "5" },
  //   "xx-large": { name: "24px", value: "6" },
  //   "xxx-large": { name: "26px", value: "7" },
  // };
  // 配置行高
  this.editor.config.lineHeights = [
    "1",
    "1.25",
    "1.5",
    "1.75",
    "2",
    "2.5",
    "3",
  ];
  // *****************************************************
  // 插入网络图片的回调
  this.editor.config.linkImgCallback = function (src, alt, href) {
    // console.log("图片 src ", src);
    // console.log("图片文字说明", alt);
    // console.log("跳转链接", href);
  };
  // *********************粘贴********************************
  // 关闭粘贴样式的过滤
  this.editor.config.pasteFilterStyle = false;
  // 忽略粘贴内容中的图片
  this.editor.config.pasteIgnoreImg = false;
  // *************************上传图片****************************
  this.editor.config.showLinkImg = true; //上传网络图片
  this.editor.config.uploadImgShowBase64 = true; //base64 保存图片

  // 限制图片大小和类型
  this.editor.config.uploadImgMaxSize = 8 * 1024 * 1024; // 8M
  // 如果不希望限制类型，可将其设为空数组:
  this.editor.config.uploadImgAccept = [];
  this.editor.config.uploadImgMaxLength = 3; // 一次最多上传 5 个图片
  // this.editor.config.uploadImgServer = uploadPath; // 上传图片的接口地址
  this.editor.config.uploadFileName = "file"; // formdata中的name属性
  this.editor.config.debug = true; // 开启debug模式
  this.editor.config.uploadImgHeaders = {
  //   Authorization: getToken(), // 设置请求头
  };

  this.editor.config.uploadImgHooks = {
    // 图片上传并返回结果，但图片插入错误时触发
    fail: function (xhr, editor, result) {
      // console.log(xhr, "插入错误时触发 xhr");
      // console.log(editor, "插入错误时触发 editor");
      // console.log(result, "插入错误时触发 result");
    },
    success: function (xhr, editor, result) {
      // 图片上传并返回结果，图片插入成功之后触发
      // console.log(xhr, editor, result, "成功之后触发");
    },
    before: function (xhr, editor, files) {
      // 图片上传之前触发
      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
      // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
      // return {
      //     prevent: true,
      //     msg: '放弃上传'
      // }
      // console.log(xhr, editor, files, "图片上传之前触发");
    },
    error: function (xhr, editor) {
      // console.log(xhr.response, editor, "图片上传出错时触发");
    },
    // 图片上传并返回了结果，想要自己把图片插入到编辑器中
    // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
    customInsert: function (insertImgFn, result) {
      // result 即服务端返回的接口
      // console.log("customInsert", result);
      // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
      insertImgFn(result.data.full);
    },
  };
  // *********************上传本地视频******************************
  // this.editor.config.uploadVideoServer = uploadPath; // 上传的接口地址
  this.editor.config.uploadVideoParams = {
    "Content-Type":
      "multipart/form-data; boundary=----WebKitFormBoundarycZm1pHksXeHS6t5r",
  };
  this.editor.config.uploadVideoHeaders = {
    //   Authorization: getToken(), // 设置请求头
  };
  let this_ = this;

  this.editor.config.uploadVideoName = "file";
  this.editor.config.uploadVideoHooks = {
    // 上传完成处理方法
    fail: (xhr, editor, result) =&gt; {
      // 插入图片失败回调
    },
    success: (xhr, editor, result) =&gt; {
      // 图片上传成功回调
    },
    timeout: (xhr, editor) =&gt; {
      // 网络超时的回调
    },
    error: (xhr, editor) =&gt; {
      // 图片上传错误的回调
      // console.log("err---&gt;", xhr);
    },
    customInsert: function (insertVideo, result) {
      // console.log("result---&gt;", result);
      const link = result.data.full;
      insertVideo(link);
    },
  };
  // ***********************创建富文本***************

  this.editor.config.onchange = (html) =&gt; {
    this.contentEditor = html;
    this.sentContent();
  };
  this.editor.config.onfocus = (html) =&gt; {
    this.sentContent();
  };
  this.editor.create();
  // 初始化
  this.$nextTick(() =&gt; {
    if (this.contentEditor) {
      // console.log("初始化");
      this.editor.txt.html(this.contentEditor);
    }
  });
},

methods: {
  // 向父组件传递富文本内容
  sentContent() {
    this.$emit("sentContent", this.contentEditor);
  },

  // 预览
  see() {
    this.lookSEE = true;
  },
  concal() {
    this.lookSEE = false;
  },
},
};
&lt;/script&gt;

&lt;style scoped&gt;
#editor{
  width: 100%;
}
#contentEditor {
width: 900px;
}
.html {
margin-top: 20px;
height: 100%;
min-height: 70vh;
}
.wrap {
/* position: absolute; */
width: 670px;
height: 300px;
line-height: 300px;
background-color: rgb(75, 73, 73);
color: #fff;
text-align: center;
}
.box {
position: relative;
}
/* 预览样式 */

/* 修改富文本字号 */
font[size="1"] {
font-size: 14px;
}
font[size="2"] {
font-size: 16px;
}
font[size="3"] {
font-size: 18px;
}
font[size="4"] {
font-size: 20px;
}
font[size="5"] {
font-size: 22px;
}
font[size="6"] {
font-size: 24px;
}
font[size="7"] {
font-size: 26px;
}
/* table 样式 */
.html &gt;&gt;&gt; table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
margin: 10px 0;
line-height: 1.5;
}
.html &gt;&gt;&gt; table td,
.html &gt;&gt;&gt; table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
min-height: 30px;
height: 30px;
}
.html &gt;&gt;&gt; table th {
border-bottom: 2px solid #ccc;
text-align: center;
background-color: #f1f1f1;
}
&lt;/style&gt;
</code></pre>`
let baseNotice = `<p style="margin-top:0px; margin-bottom:0px; text-align:left; line-height:1.75;"><font face="微软雅黑" style="" size="3" color="#333333">1、该组件的相对地址为：src/view/editor/wangEditor/components/base.vue<br/></font></p><p style="margin-top:0px; margin-bottom:0px; text-align:left; line-height:1.75;"><font face="微软雅黑" size="3" color="#333333">2、该组件没有对接后端上传文件接口，所以上传本地视频的功能无法查看，但是功能是正常的</font></p><p style="margin-top:0px; margin-bottom:0px; text-align:left; line-height:1.75;"><font face="微软雅黑" size="3" color="#333333">3、该组件目前上传图片使用的是base64的存储方式，实际开发过程请使用后端上传文件接口</font></p><p style="margin-top:0px; margin-bottom:0px; text-align:left; line-height:1.75;"><font face="微软雅黑" size="3" color="#333333">4、组件如果是自定义字号，需要在渲染富文本的地方加上预览样式（在代码中的css样式中有注释）</font></p><p style="margin-top:0px; margin-bottom:0px; text-align:left; line-height:1.75;"><font face="微软雅黑" style="" size="3" color="#333333">5、组件的表格样式本省不存在，在渲染富文本的时候，也需要加上table 样式（在代码中的css样式中有注释）</font></p>`
export {
  baseCode,
  baseNotice
};
